<template>
  <tr class="properties" v-if="goods != null">
    <td class="image">
      <img :src="goods.base64"/>
    </td>

    <td class="name">
      {{goods.name}}
    </td>

    <td class="price">
      {{goods.price}}
    </td>

    <td class="count">
      <input type="number" v-model="refCount" min="1">
    </td>

    <td class="result">
      {{result.toFixed(2)}} 元
    </td>

    <td class="operation">
      <button class="delete" @click="deleteCart">删除</button>
    </td>
  </tr>
</template>

<script lang="ts" setup>
 import { ref, PropType, onMounted, inject, Ref } from 'vue';
 import {findGoods} from '@/service'

 const props = defineProps({
   goodsid: {type: Number, required: true},
   count:   {type: Number, required: true},
   result:  {type: Number, required: true}
 })

 const emit = defineEmits(['deleteCart'])
 const refCount = ref(props.count)
 const goods = ref<Goods | null>(null)

 function deleteCart() {
   emit('deleteCart')
 }

 onMounted(async () => {
   let {data} = await findGoods(props.goodsid)
   goods.value = data

   let total = refCount.value * data.price

 })
</script>

<style lang="scss" scoped>
 tr.properties {
   td.image {
     img {
       width: 50px;
       height: 50px;
     }
   }

   td.count {
     input {
       width: 30%;
     }
   }
 }
</style>